<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示商品</title>
    <link rel="stylesheet" href="/js/bootstrap.min.css">
    <script src="/js/jquery-3.2.1.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script>
        $(function () {
            var product = $("#product");//商品
            var pageNo = 1;//页数
            var ids = null;//id
            var total = null;//最大页数
            var pname = null;//商品名称
            var inuse = null;//上架状态
            var ord = "id";//通过属性排序
            var order = 1;//排序


            //设置首页
            $("#first").click(function () {
                pageNo = 1;
                show();
            });

            //设置上一页
            $("#prev").click(function () {
                if (pageNo <= 1)
                    return;
                pageNo--;
                show();
            });

            //设置下一页
            $("#next").click(function () {
                if (pageNo >= total)
                    return;
                pageNo++;
                show();
            });

            //设置尾页
            $("#last").click(function () {
                pageNo = total;
                show();
            });

            var sku = null;
            var spu = null;
            //点击查询事件
            $("#button").click(function () {
                pname = $("#pname").val();
                inuse = $("input[type='radio']:checked").val() == null ? "" : $("input[type='radio']:checked").val();
                pageNo = 1;
                sku = $("#sku").val();
                spu = $("#spu").val();
                show();
                return false;
            });

            //展示商品信息
            function show() {
                product.find("tr:gt(0)").remove();
                $.get("/applets/product/page", {
                    "sku": sku,
                    "spu": spu,
                    "pname": pname,
                    "inuse": inuse,
                    "pageNo": pageNo,
                    "pageSize": 5,
                    "order": order,
                    "ord": ord
                }, function (da) {
                    if (da.code != 0) {
                        alert(da.msg);
                        return;
                    }
                    var res = da.data;
                    total = res.total;
                    $.each(res.list, function (i, d) {
                        product.append("<tr><td>" + d.id +
                            "</td><td>" + d.name +
                            "</td><td>" + d.price +
                            "</td><td>" + getOneParent(d.typeid) +
                            "</td><td>" + getStatus(d.inuse) +
                            "</td><td>" + d.stockcount +
                            "</td><td>" + d.imgs +
                            "</td><td>" + d.sku +
                            "</td><td>" + d.spu +
                            "</td><td>" + d.clicknums +
                            "</td><td>" + d.salenums +
                            "</td><td><button type='button' class='btn btn-primary btn-sm' id='del' code='" + d.id + "'>删除</button>&nbsp;" +
                            "<a class='btn btn-primary btn-sm' href='/applets/product/select?id=" + d.id + "'>更新</a>" +
                            "</td><td><input type='checkbox' value='" + d.id + "'></td></tr>"
                        )
                    })
                })
            };

            //获得父类
            function getOneParent(w) {
                var parent = null;
                $.ajax({
                    url: "/applets/type/getOnePar",
                    type: "post",
                    data: {"parentid": w},
                    async: false,
                    success: function (da) {
                        parent = da.data;
                    }
                });
                return parent;
            }

            //获得状态
            function getStatus(q) {
                if (q == true)
                    return "是";
                return "否";
            }

            //点击删除事件
            product.on("click", '#del', function () {
                ids = $(this).attr("code");
                del();
                return false;
            });

            //删除商品的ajax
            function del() {
                var a = confirm("是否删除该商品?");
                if (!a)
                    return;
                $.ajax({
                    url: "/applets/product/delete",
                    data: {"id": ids},
                    type: "post",
                    success: function (ur) {
                        alert(ur.msg);
                    }
                });
            };
            show();

            var upbu = $("#upbu");//上架按钮
            var dobu = $("#dobu");//下架按钮
            var state = null;//状态1或者0
            var pro = null;//数组

            //上架事件
            upbu.click(function () {
                state = 1;
                upda();
            });

            //下架事件
            dobu.click(function () {
                state = 0;
                upda();
            })

            //ajax修改状态
            function upda() {
                //选中为空不行
                if ($('input:checkbox:checked').length == 0) {
                    alert("请选择要修改状态的商品!")
                    return;
                }
                //新建数组,插入值
                pro = new Array();
                $('input:checkbox:checked').each(function () {
                    pro.push($(this).val());
                })
                //改为字符串,方便传参
                var prostr = pro.join("-");
                $.get("/applets/product/upInuse", {"prostr": prostr, "state": state}, function (data) {
                    alert(data.msg);
                })
            };

            //销量升序
            $("#salenums").click(function () {
                ord = "salenums";
                pageNo = 1;
                order = 1;
                show();
                return false;
            });
            //价格升序
            $("#priceup").click(function () {
                ord = "price";
                pageNo = 1;
                order = 1;
                show();
                return false;
            });
            //价格降序
            $("#pricedw").click(function () {
                ord = "price";
                pageNo = 1;
                order = 0;
                show();
                return false;
            });
        });
    </script>
</head>
<body>
<div class="container">
    <h2 class="text-center">商品展示</h2>

    <!--导航-->
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active" href="/Menu.html">返回主菜单</a>
        </li>
        <li class="nav-item">
            <a class="nav-link " href="AddProduct.html">商品增加</a>
        </li>
        <li class="nav-item">
            <button type="button" class="btn btn-link" id="salenums">销量升序</button>
        </li>
        <li class="nav-item">
            <button type="button" class="btn btn-link" id="priceup">价格升序</button>
        </li>
        <li class="nav-item">
            <button type="button" class="btn btn-link" id="pricedw">价格降序</button>
        </li>
    </ul>

    <!--查询表单-->
    <form action="#" method="post">
        <div class="form-group">
            <label>商品名称(模糊)</label>
            <input type="text" name="name" id="pname" class="form-control">
        </div>
        <div>
            <label>是否在售</label>
            <label class="radio-inline"><input type="radio" name="inuse" value="1">上架中</label>
            <label class="radio-inline"><input type="radio" name="inuse" value="0">已下架</label>
        </div>
        <div class="form-group">
            <label>规格SKU</label>
            <input type="text" name="sku" id="sku" class="form-control">
        </div>
        <div class="form-group">
            <label>参数SPU</label>
            <input type="text" name="spu" id="spu" class="form-control">
        </div>
        <div>
            <input type="button" value="搜索商品" class="form-control" id="button">
        </div>
    </form>
</div>

<div class="container">
    <table class="table table-striped" id="product">
        <thead>
        <tr>
            <th>ID</th>
            <th>商品名称</th>
            <th>价格</th>
            <th>分类</th>
            <th>是否在售</th>
            <th>库存量</th>
            <th>图片地址</th>
            <th>规格</th>
            <th>参数</th>
            <th>浏览次数</th>
            <th>销量</th>
            <th>操作</th>
            <th>
                <button type="button" class="btn btn-sm btn-light" id="upbu">上架</button>
                <button type="button" class="btn btn-sm btn-light" id="dobu">下架</button>
            </th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

<div class="container offset-md-5">
    <ul class="pagination">
        <li class="page-item" id="first"><a class="page-link">首页</a></li>
        <li class="page-item" id="prev"><a class="page-link">上一页</a></li>
        <li class="page-item" id="next"><a class="page-link">下一页</a></li>
        <li class="page-item" id="last"><a class="page-link">尾页</a></li>
    </ul>
</div>

</body>
</html>